<template>
	<sl-page title="商品推广">
		<view class="promotion">
			<!-- 分类tab -->
			<view class="promotion-tab">
				<Sort :sortDatas="sortDatas" @sort:click="handleSortType"></Sort>
			</view>
			<!-- 推广列表 -->
			<z-paging ref="paging" :paging-style="{'margin-top':top + 'px'}" v-model="promotionList" @query="loadPage">
				<view class="promotion-page">
					<List :listDatas="promotionList">
						<template v-slot="{ item }">
							<view class="flex m-b48">
								<view class="goods-image">
									<sl-image :value="item.productImage"></sl-image>
								</view>
								<view class="flex flex-dir-column flex-box">
									<view class="f-w">{{ item.productName }}</view>
									<view class="flex flex-x-between py-1">
										<view class="flex f-tip">
											价格：
											<Money :priceValue="item.productPrice" :activeClass="['money-normal']">
											</Money>
										</view>
										<view class="flex f-tip">
											销量：
											{{item.sales || initData.salesVolume}}
										</view>
										<view class="flex f-tip flex-y-center">
											评价
											<uni-icons type="right" size="18"></uni-icons>
										</view>
									</view>
								</view>
							</view>
							<view class="flex flex-x-end">
								<view class="promotion-brokerage">
									<view class="partner-img">
									</view>
									<view class="px-1">
										佣金
									</view>
									<Money :priceValue="item.profit1" :activeClass="['money-price']"></Money>
								</view>
								<view class="promotion-button" @click="promotion(item)">
									去推广
								</view>
							</view>
						</template>
					</List>
				</view>
			</z-paging>
			<!-- 分享海报 -->
			<SharePosters :shareId.sync="shareId" :shareType="shareType" :productId="productId"
				:painterImage="painterImage" :painterTextDescription="painterTextDescription"
				:painterTextLabel="painterTextLabel" :painterTextPrice="painterTextPrice"
				:targetPage="painterTargetPage"></SharePosters>
		</view>
	</sl-page>
</template>

<script>
	import DistributionGoodsApi from '@/api/goods/distributionGoods.js';
	import ShareApi from '@/api/share/share.js';
	import Constants from '@/constants';
	import Money from '@/pages/components/money/money.vue';
	import List from '@/pages/components/list/list.vue';
	import Sort from '@/pages/components/sort/sort.vue';
	import SharePosters from '@/pages/components/share/sharePosters.vue';

	//
	export default {
		//
		name: 'goodsIndex',
		//
		mixins: [Constants],
		//
		components: {
			Money,
			List,
			Sort,
			SharePosters
		},
		//
		data() {
			return {
				//
				options: {},
				//
				query: {},
				//正在加载
				isLoading: true,
				//
				promotionList: [],
				top: '',
				//
				shareId: '',
				shareType: '',
				productId: '',
				painterImage: '',
				painterTextDescription: '',
				painterTextLabel: '',
				painterTextPrice: '',
				painterTextDashedPrice: '',
				painterTargetPage: 'xj_shop/goods/detail',
				//
				sortDatas: [{
					isSort: false,
					sortField: 'newFlag',
					sortName: '分类'
				}, {
					isSort: false,
					sortField: 'sales',
					sortName: '销量'
				}, {
					isSort: false,
					sortField: 'price',
					sortName: '价格'
				}],
				//排序
				orderBy: [],
			};
		},
		//
		onLoad(options) {
			this.options = options;
		},
		//
		onShow() {
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.promotion-tab').boundingClientRect(data => {
					this.top = this.CustomBar + data.height;
				}).exec();
			});
		},
		//
		methods: {
			//获取收藏
			loadPage: async function() {
				try {
					let res = await DistributionGoodsApi.query(this.query, this.param);
					this.$refs.paging.complete(res.obj.data);
				} catch (error) {
					console.error('【goodsIndex:loadPage】:', error);
					this.$refs.paging.complete(false);
				}
			},
			//切换排序方式
			handleSortType(item) {
				// this.reset();
				// this.dohandleSortType(item);
				// this.doQuery();
			},
			//推广
			promotion: async function(item) {
				//
				this.painterImage = this.$options.filters['ImageSrc'](item.productImage);
				this.painterTextDescription = item.productName;
				this.painterTextLabel = item.tenantName;
				this.painterTextPrice = item.productPrice;
				//
				const res = await ShareApi.product(item.productId);
				this.shareId = res.obj.shareId;
				this.shareType = res.obj.shareType;
				this.productId = res.obj.productId;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.promotion {
		font-size: $uni-font-size-base;
		color: $uni-text-color-primary;

		.promotion-page {
			margin-left: 16rpx;
			margin-right: 16rpx;

			.goods-image {
				position: relative;
				width: 128rpx;
				height: 128rpx;
				overflow: hidden;
				border: 2rpx solid #CCCCCC;
				margin-right: 34rpx;
				border-radius: 12rpx;
			}

			.promotion-brokerage {
				display: inline-flex;
				padding: 0px 8px;
				align-items: center;
				gap: 10px;
				border-radius: 4px;
				background: #FFF7F4;
				margin-right: 24rpx;
				.partner-img {
					height: 36rpx;
					width: 36rpx;
					// margin-left: 12px;
					border-radius: 100% 100% 100% 100%;
					background-image: url("@/xj_distribution/static/distributionCommission.png");
					background-repeat: no-repeat;
					/* 控制图片不重复 */
					background-size: cover;
					/* 调整图片大小以适应div尺寸 */
					/* 可选：以下属性用于对齐和定位图片 */
					background-position: center center;
					/* 居中对齐 */
				}
			}

			.promotion-button {
				display: flex;
				font-size: $uni-font-size-base;
				justify-content: center;
				display: inline-flex;
				height: 26px;
				padding: 12px 16px;
				justify-content: center;
				align-items: center;
				gap: 10px;
				flex-shrink: 0;
				color: #FFF;
				border-radius: 38px;
				background: linear-gradient(132deg, #FEA370 0%, #FE2406 100%);
				box-shadow: 0px 2px 11px 0px rgba(188, 46, 46, 0.25);
			}
		}
	}
</style>